<template>
	<view class="g-list h-fill">
		<view v-if="list.length">
			<view class="g-list-item" @click="handleItemClick(item)" v-for="(item, index) in list" :key="item.id">
				<active-game :lineColor="colors[index % colors.length]" :activeGame="item" @action="handleAction($event, item)"></active-game>
			</view>
			<uni-load-more :status="loadingStatus"></uni-load-more>
		</view>
		<view v-else class="uni-flex uni-column align-center t-mg-2">
			<image class="no-game-tips" :src="$getCloudStorageUrl('/img_wupiao@2x.png')" mode="aspectFit"></image>
			<text style="color: #4B4D69;">暂无游戏，快去发起吧</text>
		</view>
	</view>
</template>

<script>
	import {getActiveGameList, queryStatus, facilityAvailableList} from "../../api/game.js";
	import {mapState} from "vuex";
	const colors = ["#D61719", "#F4DB21", "#519EF9"];
	export default {
		data() {
			return {
				colors,
				list: [],
				loadingStatus: "noMore",
				pageNum: 0,
				pageSize: 20
			};
		},
		props: {
			noName: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			...mapState(['currShop', "userInfo"]),
		},
		methods: {
			handleAction(action, item) {
				this.$emit("itemAction", {item, action});
			},
			handleItemClick(item) {
				this.$emit("itemClick", item);
			},
			async updateStatus() {
				try{
					var items = this.list.filter(item => {
						return item.status !== "FINISHED";
					});
					var ids = items.map(item => item.id);
					if (!ids.length) {
						return;
					}
					let status = await queryStatus(ids);
					
					for (var i = 0; i < items.length; i++) {
						let item = items[i]
						let state = status[i];
						item.status = state.status;
						item.boyCount = state.boyCount;
						item.girlCount = state.girlCount;
					}
					//是否有解散了的游戏
					var needReload = false;
					for (var i = 0; i < this.list.length; i++) {
						let item = this.list[i];
						if (item.status === "DISSOLVED") {
							needReload = true;
							break;
						}
					}
					if (needReload) {
						this.reload();
						return;
					}
					
					items = this.list.filter(item => {
						return item.status === "MATCHING";
					});
					let games = items.map(item => {
						return {
							storeId: item.storeId,
							gameId: item.gameId,
							peopleCount: item.count
						}
					});
					let facilityStatus = await facilityAvailableList(games);
					for (var i = 0; i < items.length; i++) {
						let item = items[i];
						item.noFacility = !facilityStatus[i];
					}
				}catch(e){
					this.$log(e);
				}
			},
			async reload() {
				if (!this.currShop.id) {
					return;
				}
				if (this.loadingStatus === "loading") {
					return;
				}
				this.loadingStatus = "more",
				this.list = [];
				this.pageNum = 0;
				await this.loadMore();
			},
			async loadMore() {
				if (this.loadingStatus === "loading" || this.loadingStatus === "noMore") {
					return;
				}
				let pageNum = this.pageNum + 1;
				let prevStatus = this.loadingStatus;
				this.loadingStatus = "loading";
				try{
					var query = {
						storeId: this.currShop.id,
						pageNum: pageNum,
						pageSize: this.pageSize
					};
					if (this.userInfo.id) {
						query.excludeMyActiveGame = true;
						query.memberId = this.userInfo.id;
					}
					let res = await getActiveGameList(query);
					if (res.records.length) {
						this.pageNum += 1;
						res.records.forEach(item => {
							item.noFacility = false;
						});
						this.list = this.list.concat(res.records);
						await this.updateStatus();
					}
					if (this.list.length < res.total) {
						this.loadingStatus = "more";
					} else {
						this.loadingStatus = "noMore";
					}
				}catch(e){
					this.loadingStatus = prevStatus;
					this.$log("加载活动的游戏列表遇到错误", e);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.g-list {
		&-item {
			
		}
		&-item:not(:last-child) {
			margin-bottom: 20rpx;
		}
	}
	.no-game-tips {
		width: 360rpx;
		height: 360rpx;
	}
</style>
